<template>
    <view
        class="wrap-date-screen flex"
        :style="'top:' + navigationHeight + 'px;'"
    >
        <view
            class="date-item flex align-center just-center f-28"
            :class="{ activeColor: chooseIndex == 0 }"
            @click="onCurrentMonth"
        >
            当月
        </view>

        <view
            class="date-item flex align-center just-center f-28"
            @click="onDateScreen"
        >
            <view :class="{ active: chooseIndex == 1 }"> 日期筛选</view>

            <image
                v-if="chooseIndex == 1"
                class="arrow"
                :class="{ 'arrow-trans': isShow }"
                :src="getImageURL('technician/mine/arrow_down_theme.png')"
            />

            <image
                v-else
                class="arrow"
                :src="getImageURL('technician/mine/arrow_down.png')"
                :class="{ 'arrow-trans': isShow }"
            />
        </view>

        <view
            :style="'top: calc(' + navigationHeight + 'px + 88rpx);'"
            class="date-pop"
            @touchmove.stop.prevent
            v-show="isShow"
            @click.stop="onDismiss"
        >
            <view class="pop-white" @click.stop="onStop($event)">
                <view class="start-end flex">
                    <picker
                        mode="date"
                        @change="onDateChange('start', $event)"
                        :value="start_date == '' ? end_date : start_date"
                        :start="$filters.getStartDate(end_date)"
                        :end="end_date"
                    >
                        <view class="item flex column align-center just-center">
                            <view class="title f-28"> 开始时间 </view>

                            <view
                                class="sub-title f-28"
                                :class="{ activeColor: start_date !== '' }"
                            >
                                {{ start_date == "" ? "开始时间" : start_date }}
                            </view>
                        </view>
                    </picker>

                    <picker
                        mode="date"
                        :start="start_date"
                        @change="onDateChange('end', $event)"
                        :value="end_date == '' ? start_date : end_date"
                        :end="$filters.getEndDate(start_date)"
                    >
                        <view class="item flex column align-center just-center">
                            <view class="title f-28"> 结束时间 </view>

                            <view
                                class="sub-title f-28"
                                :class="{ activeColor: end_date !== '' }"
                            >
                                {{ end_date == "" ? "结束时间" : end_date }}
                            </view>
                        </view>
                    </picker>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
const scrrenMaxMonth = 3;
export default {
    props: {},
    data() {
        return {
            navigationHeight: this.$navigationHeight,

            isShow: false,

            chooseIndex: 0,

            start_date: "",
            end_date: "",
        };
    },
    mounted() {},
    methods: {
        /**
         * 当月
         */
        onCurrentMonth() {
            this.onDismiss();
            this.chooseIndex = 0;
            this.start_date = "";
            this.end_date = "";
            this.$emit("changeDate", "");
        },
        /**
         * 日期筛选
         */
        onDateScreen() {
            this.chooseIndex = 1;
            this.isShow = !this.isShow;
        },
        /**
         * 关闭日期筛选
         */
        onDismiss() {
            this.isShow = false;
        },

        /**
         * 拦截点击事件
         */
        onStop(e) {
            e.stopPropagation();
        },
        /**
         * 选择时间
         */
        onDateChange(type, e) {
            const date = e.detail.value;
            if (type == "start") {
                this.start_date = date;
            } else if (type == "end") {
                this.end_date = date;
            }
            if (this.start_date && this.end_date) {
                this.isShow = false;
                this.$emit(
                    "changeDate",
                    this.start_date + " - " + this.end_date
                );
                this.start_date = "";
                this.end_date = "";
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.wrap-date-screen {
    position: sticky;
    left: 0;
    width: 100%;
    height: 88rpx;
    z-index: 10;
    flex-wrap: wrap;
    overflow: hidden;
    background-color: white;

    .date-item {
        flex: 1;
        height: 88rpx;
        color: $title-color;
        overflow: hidden;

        .arrow {
            margin-left: 10rpx;
            width: 20rpx;
            height: 12rpx;
        }

        .arrow-trans {
            transform: rotate(180deg);
        }
    }
}

.date-pop {
    position: fixed;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    background-color: rgba(0, 0, 0, 0.5);

    .pop-white {
        width: 100%;
        border-top: 2rpx solid #e8e8e8;
        background-color: white;

        .start-end {
            width: 100%;
            height: 110rpx;
            flex-wrap: wrap;

            .item {
                width: 375rpx;
                height: 110rpx;

                .title {
                    color: $title-color;
                }
                .sub-title {
                    margin-top: 15rpx;
                    color: #b0b0b0;
                }
            }
        }
    }
}
.activeColor {
    color: $theme-color !important;
}
</style>
